<template>
	<view class="">
		<u-action-sheet class="sheet" @close="closePayType" :closeOnClickOverlay="true" round="15"
			:safeAreaInsetBottom="true" :show="isPayTypes">
			<view class="content">
				<view class="title">
					选择支付方式
				</view>
				<view class="ul">
					<view class="view a1" @click="checkPay(1)">
						<view class="l">
							<text class="name">微信支付</text>
						</view>
					</view>
					<view class="view a3" @click="checkPay(2)">
						<view class="l">
							<text class="name">农行支付</text>
						</view>
					</view>
				</view>
				<view class="total-box">
					<view class="t_l">
						<text>合计:</text>
						<text class="amount">￥ <text class="money">{{total}}</text></text>
					</view>
					<view class="t_r">
						
					</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	export default{
		name:"sheetPay",
		props:{
			isPayTypes:{
				type:Boolean,
				default:false
			},
			total:{
				type:String,
				default:""
			}
		},
		onLoad(){
			
		},
		methods:{
			closePayType(){
				this.$emit('closePayType',false)
			},
			checkPay(e){
				const data =  {
					isPayTypes:false,
					payType:e
				}
				this.$emit("checkPay",data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #fff;
		border-radius: 0;
		text-align: left;
		.title{
			padding: 20px 5px 20px 15px;
			font-size: 16px;
			font-weight: 700;
		}
		.ul{
			padding: 0 15px;
			.view{
				padding: 0 15px;
				height: 50px;
				border-radius: 5px;
				border: 1px solid #09bb07;
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				.l{
					width: 150px;
					.name{
						font-size: 14px;
						font-weight: 700;
					}
				}
			}
			.al{
				border-color: #09bb07;
			}
			.a3{
				border-color: rgb(0, 152, 131);
			}
		}
		.total-box {
			padding: 4px 15px;
			display: flex;
			align-items: center;
			background-color: #fff;
			text-align: left;
		
			.t_l {
				flex: 1;
				font-size: 14px;
				color: #666;
		
				.amount {
					color: #fe3b30;
		
					.money {
						font-size: 18px;
					}
				}
			}
		
			.t_r {
				width: 35%;
			}
		
		}
	}
</style>